![jQuery Mobileでフォームを作る](https://devio2023-media.developers.io/wp-content/uploads/2011/11/jQueryMobile.png)
jQuery Mobileでフォームを作る
はじめに
今回はフォームについてです。 jQuery Mobileでは通常のコントロールの見た目ではなくて、モバイル端末に適した見た目がいくつか用意されています。そのうちのいくつかを使って簡単なフォームを作成してみたいと思います。
基本
フォーム作成は通常のhtmlと同様にformタグで括り、その中にフォームの要素を配置していきます。 通常ラベルとフォーム要素をセットで配置すると思いますが、それらのセットをdivまたはfieldsetなどで括り、data-role=“fieldcontain”を指定します。例えば、名前をテキストインプットで配置するなら次の様になります。
<form action="" method="post"> <div data-role="fieldcontain"> <label for="name">名前</label> <input type="text" id="name" /> </div> </form>
選択要素
単数選択、複数選択の選択形の要素はいくつかの表現が用意されています。男性女性などの2択ならフリップスイッチが使えます。selectタグにdata-role="slider"を指定します。
<div data-role="fieldcontain"> <label for="gender">性別</label> <select name="gender" id="gender" data-role="slider"> <option value="man">男性</option> <option value="woman">女性</option> </select> </div>
複数選択のチェックボックスをリスト風に表示する事が出来ます。
<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>お問い合わせ種別</legend> <input type="checkbox" name="type1" id="type1" value="html" /> <label for="type1">html</label> <input type="checkbox" name="type2" id="type2" value="JavaScript" /> <label for="type2">JavaScript</label> <input type="checkbox" name="type3" id="type3" value="css" /> <label for="type3">css</label> </fieldset> </div>
ボタン
ボタンはtype="button"を指定すれば良いのですが、data-inline="true"で横並びにする事が出来ます。
<input type="button" value="クリア" data-inline="true" id="clearBtn" /> <input type="button" value="送信" data-inline="true" />
フォームのクリア
キャンセルボタンにフォームのクリア機能を付けてみます。 テキスト入力はvalueを""で初期化をすれば良いですが、独自の見た目になっている入力要素については、値の初期化を行った後にリフレッシュさせる必要があります。
/* テキスト入力形はvalueに""を設定する */ $("input[type='text']").attr("value", ""); $("textarea").attr("value", ""); /* check boxの場合は、チェックされているものを外して、リフレッシュする */ $("input[type='checkbox']").attr("checked", false).checkboxradio("refresh"); /* フリップスイッチの場合も初期値に戻して、リフレッシュさせる */ var mySlider = $("select#gender"); mySlider[0].selectedIndex = 0; mySlider.slider("refresh");
まとめ
動作は次の様になります。
フォームを開く(このサンプルはChromeブラウザでの閲覧をおすすめします。)
今回作ったソースは以下の通りです。(JavaScriptとページ部分のみ)
フォームについては他にもカスタマイズされた見た目があるのでフォームギャラリー - jQuery Mobile 日本語リファレンスのページを参照してみてください。
<script type="text/javascript"> $(function(){ $("#cancelBtn").click(function(){ /* check box */ $("input[type='checkbox']").attr("checked", false).checkboxradio("refresh"); $("input[type='radio']").attr("checked", false).checkboxradio("refresh"); /* slider */ var mySlider = $("select#gender"); mySlider[0].selectedIndex = 0; mySlider.slider("refresh"); /* text */ $("input[type='text']").attr("value", ""); $("textarea").attr("value", ""); }); }); </script> <div data-role="page" id="form"> <div data-role="header" data-position="fixed"> <h1>form</h1> </div> <div data-role="content"> <h2 id="toc-6">お問い合わせ</h2> <form action="" method="post"> <div data-role="fieldcontain"> <label for="name">名前</label> <input type="text" id="name" /> </div> <div data-role="fieldcontain"> <label for="gender">性別</label> <select name="gender" id="gender" data-role="slider"> <option value="man">男性</option> <option value="woman">女性</option> </select> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>お問い合わせ種別</legend> <input type="checkbox" name="type1" id="type1" value="html" /> <label for="type1">html</label> <input type="checkbox" name="type2" id="type2" value="JavaScript" /> <label for="type2">JavaScript</label> <input type="checkbox" name="type3" id="type3" value="css" /> <label for="type3">css</label> </fieldset> </div> <div data-role="fieldcontain"> <label for="comment">ご自由にどうぞ!!</label> <textarea id="comment"></textarea> </div> <input type="button" value="クリア" data-inline="true" id="clearBtn" /> <input type="button" value="送信" data-inline="true" /> </form> </div> <div data-role="footer" data-position="fixed"> <h4>form</h4> </div> </div>